
.compact-checkbox {
    --mdc-checkbox-state-layer-size: 32px; // Reduce from 40px
    .mat-mdc-checkbox-touch-target {
        height: var(--mdc-checkbox-state-layer-size);
        width: var(--mdc-checkbox-state-layer-size);
    }

    .mdc-checkbox__native-control {
        // The positions will automatically adjust based on the CSS variable
        width: var(--mdc-checkbox-state-layer-size) !important;
        height: var(--mdc-checkbox-state-layer-size) !important;
    }
}


/*
// This reduces the row height for a more compact space efficient table
.mdc-checkbox, .mdc-checkbox__native-control {
    height: 10px;
}

.custom-small-checkbox {
    transform: scale(0.7);
    transform-origin: center;

    // Optional: Adjust margins to compensate for the scaling
    margin: -5px; // Negative margin to reduce space taken up
}
*/
.inventory-grid {
  // Mobile first - Name, State, User Prompt
  grid-template-columns:
    40px                    // Checkbox
    minmax(120px, 200px)    // Name
    100px                   // State
    minmax(160px, 1fr);     // User Prompt
  min-width: 0;
  gap: 0.5rem;

  // Tablets and up (md) - add Error/Output
  @screen md {
    grid-template-columns:
      40px                    // Checkbox
      minmax(120px, 200px)    // Name
      100px                   // State
      minmax(160px, 1fr)      // User Prompt
      minmax(160px, 250px);   // Error/Output
    gap: 1rem;
  }

  // Desktop and up (lg) - add Type and Cost
  @screen lg {
    grid-template-columns:
      40px                    // Checkbox
      minmax(120px, 200px)    // Name
      100px                   // State
      100px                   // Type
      minmax(160px, 1fr)      // User Prompt
      minmax(160px, 250px)    // Error/Output
      100px;                  // Cost
    gap: 1rem;
  }

  // Content cells
  > div {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0.2rem;
  }
}

.state-completed {
  @apply text-green-600;
}

.state-error {
  @apply text-red-600;
}

.state-running {
  @apply text-blue-600;
}
